<!-- 司机管理 -->
<template>
  <div class="containers">
    <TablePage
      v-model:change="driverModel.pageIndex"
      :page-list="pageList4"
      :columns="tableColumns4"
      :page-count="pageCount"
      @click-search="queryData"
    >
      <template #search>
        <TableSearch
          v-model:change="driverModel.content"
          :model="driverModel.content"
          type="input"
          left-title="关键字"
        />
      </template>

      <template #buttons>
        <el-button type="primary" @click="addRow()"> 添加 </el-button>
      </template>
      <el-table-column fixed="right" label="操作" header-align="center" align="center" width="220">
        <template #default="scope">
          <el-button type="text" size="small" @click.prevent="openRow(scope.$index)">
            查看监控
          </el-button>
          <el-button type="text" size="small" @click.prevent="addRow(scope.$index)">
            编辑
          </el-button>
          <el-button type="text" size="small" @click.prevent="deleteRow(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </TablePage>

    <Dialog v-model="dialogVisible" title="添加监控">
      <template #content>
        <div class="flex-c">
          <el-form label-width="100px">
            <el-form-item label="监控名称">
              <el-input v-model="sensorModel.sensorId" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="监控编号">
              <el-input v-model="sensorModel.sensorId" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="sensorModel.sensorId" placeholder="请输入" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <ElButton v-if="actionType !== 'detail'" type="primary" :loading="loading" @click="save">
          保存
        </ElButton>
        <ElButton @click="dialogVisible = false">关闭</ElButton>
      </template>
    </Dialog>

    <Dialog v-model="openDialogVisible" title="查看监控">
      <template #content>
        <div class="flex-c">
          <img style="width: 100%; height: 100%" src="@/assets/imgs/bbb.png" fit="fill" />
        </div>
      </template>
      <template #footer>
        <ElButton @click="dialogVisible = false">关闭</ElButton>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { TableSearch } from '@/components/TableSearch'
import { TablePage } from '@/components/TablePage'
import { Dialog } from '@/components/Dialog'
import useBaseDriver from '@/composables/driver/useBaseDriver'
import useDriverRequest from '@/composables/driver/useDriverRequest'

let { driverModel, tableColumns4, dialogVisible, sensorModel, openDialogVisible } = useBaseDriver()
let { pageList4, pageCount, getDriverInfoListApi } = useDriverRequest()
const queryData = () => {
  getDriverInfoListApi(driverModel)
}

const addRow = () => {
  dialogVisible.value = true
}

const openRow = () => {
  openDialogVisible.value = true
}
const deleteRow = () => {
  pageList.value = []
}
</script>
<style lang="less" scoped></style>
